<template>
  <div class="login">
    <div class="header">
      <img src="../../assets/logo.jpg" width="60" height="60" alt />
      <h3>隧道结构监测信息智能管控平台</h3>
    </div>
    <div class="item_data">
      <div class="logo">
        <img src="../../assets/logo.jpg" width="80" height="80" alt />
      </div>
      <div class="item_name">
        <h3>隧道结构监测信息智能管控平台</h3>
      </div>
      <el-form :model="loginForm" status-icon ref="loginForm" label-width="100px">
        <div class="username">
          <el-input
            placeholder="用户名"
            prefix-icon="el-icon-user-solid"
            type="text"
            v-model="loginForm.username"
          ></el-input>
        </div>
        <div class="password">
          <el-input
            placeholder="密   码"
            prefix-icon="el-icon-s-cooperation"
            type="password"
            v-model="loginForm.password"
          ></el-input>
        </div>
        <div class="wangji">
          <a>忘记密码?</a>
        </div>
        <div class="login_button">
          <el-button style="width: 100%;" type="primary" @click="sumbmitLogin(loginForm)">登录</el-button>
        </div>
      </el-form>
    </div>

    <div class="fooler">
      <p>Copyright@山西省交通建设工程质量检测中心(有限公司)</p>
    </div>
  </div>
</template>

<script>
import api from '../../api'
import qs from 'qs'
import jsCookie from 'js-cookie'

export default {
  data() {
    return {
      activeName: 'login',
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    sumbmitLogin(formName) {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const user = {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
          api.login(qs.stringify(user))
            .then(res => {
              if (res.data.code == 2001) {
                var tokenData = res.data.data.token
                var usernameData = res.data.data.userInfo.nickname
                jsCookie.set('username', usernameData,{ expires: 7 })
                jsCookie.set('token', tokenData,{ expires: 7 })
                this.$router.push('/BigData')
              }
            }).catch(err=>{
              if(err.data.code != 2001){
                this.$message({
                  type: 'warning',
                  message: err.data.message
                })
              }
            })
        } else {
          this.$message.error('请输入所有字段')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style  scoped>
.banner {
  font-size: 30px;
  margin-top: 100px;
}
.box-card {
  width: 600px;
  margin: 0 auto;
  margin-top: 20px;
}
.login {
  width: 100%;
  height: 100%;
  background: url(../../assets/login.png) no-repeat;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: relative;
}
.item_data {
  width: 20%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(53%, -50%);
  padding: 40px 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #999;
}
.logo img {
  border-radius: 52%;
}
.item_data input {
  width: 100%;
}
.item_name {
  margin-top: 30px;
}
.username {
  margin-top: 30px;
}
.password {
  margin-top: 30px;
}
.header {
  margin-top: 20px;
  margin-left: 50px;
}
.header h3 {
  float: left;
  margin-top: 20px;
  margin-left: 17px;
}

.header img {
  float: left;
}

.wangji {
  margin-top: 20px;
  text-align: right;
}
.login_button {
  margin-top: 20px;
}
.fooler {
  position: absolute;
  bottom: 2%;
  left: 40%;
  font-size: 20px;
  font-weight: 1px;
}
</style> 


